import React, {Component} from 'react'
import pageWithIntl from '../components/PageWithIntl'
import {bindActionCreators} from 'redux'
import Head from 'next/head'
import Router from 'next/router'
import {initStore} from '../store'
import {getProductDetail, getCommentList, getCommentListMobile, changeMainImg } from '../actions/detail/index'
import {newDevice, getIntDevice, setMonitor} from '../actions/home/index'
import Wapper from '../components/wapper'
import withRedux from 'next-redux-wrapper'

import Layout from '../layouts/pc'
import MLayout from '../layouts/mobile'

/*import dynamic from 'next/dynamic'
 const Mobile = dynamic( import ('../components/mobile/detail/index'));
 const Pc = dynamic( import ('../components/pc/detail/index'));*/
import Mobile from '../components/mobile/detail/index';
import Pc from '../components/pc/detail/index';
import SkinTag from '../components/skinTag'

class Index extends Component {
    constructor() {
        super();
        this.state = {
            itemId: null
        }
    }

    shouldComponentUpdate(nextProps,nextState){
        const propsNow = Object.assign({},
            {home: this.props.home},
            {detailData: this.props.detail.detailData},
            {itemId: this.state.itemId},
        );
        const propsNext = Object.assign({},
            {home: nextProps.home},
            {detailData: nextProps.detail.detailData},
            {itemId: nextState.itemId},
        );
        return JSON.stringify(propsNow) !== JSON.stringify(propsNext);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.url.query.itemId != this.state.itemId && this.state.itemId  != null) {
            this.initState();
            window.scrollTo(0,0)
        }
    }

    componentDidMount() {
        this.initState();
        window.scrollTo(0,0);
    }

    initState() {
        if (Router.query.itemId) {
            this.setState({
                itemId: Router.query.itemId
            });
            this.props.getProductDetail({
                itemId: Router.query.itemId // 'd6bf9be0fce141afadfa83dad3c9384c' Router.query.itemId
            });
            this.props.getCommentList({
                orderby: 'newest',
                itemId: Router.query.itemId, //'d6bf9be0fce141afadfa83dad3c9384c',
                pageNum: '1',
                pageSize: '10'
            });
            this.props.getCommentListMobile({
                orderby: 'newest',
                itemId: Router.query.itemId, //'d6bf9be0fce141afadfa83dad3c9384c',
                pageNum: '1',
                pageSize: '9999'
            });
            this.props.changeMainImg(0);
        }
    }


    render() {
        const {device,skin} = this.props.home;
        const {detail} = this.props;

        if (device === "pc") {
            return (
                <Layout>
                    <SkinTag  {...this.props.home}></SkinTag>
                    <Head>
                        <title>{detail.detailData.name || 'detail'} </title>
                    </Head>
                    <Pc></Pc>
                </Layout>
            )
        } else if (device === 'mobile') {
            return (
                <MLayout>
                    <Mobile  {...this.props.home}></Mobile>
                    <Head>
                        <title>{detail.detailData.name || 'detail'}</title>
                    </Head>
                </MLayout>
            )
        } else {
            return null
        }

    }
}

const mapStateToProps = ({detail, home,headers}) => ({
    detail,
    home,
    headers
});

const mapDispatchToProps = (dispatch) => {
    return {
        getProductDetail: bindActionCreators(getProductDetail, dispatch),
        newDevice: bindActionCreators(newDevice, dispatch),
        getIntDevice: bindActionCreators(getIntDevice, dispatch),
        getCommentList: bindActionCreators(getCommentList, dispatch),
        getCommentListMobile: bindActionCreators(getCommentListMobile, dispatch),
        setMonitor: bindActionCreators(setMonitor, dispatch),
        changeMainImg: bindActionCreators(changeMainImg, dispatch),
    }
};

export default withRedux(initStore, mapStateToProps, mapDispatchToProps)(pageWithIntl(Wapper(Index)))